<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>订单明细管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/lib/layui-v2.6.3/layui.js"></script>
    <script src="/static/lib/jq-module/jquery.particleground.min.js"></script>
    <script src="/static/js/common.js"></script>

    <!-- 完全复用原页面CSS变量与样式 -->
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --secondary: #3f37c9;
            --success: #19be6b;
            --danger: #f72585;
            --warning: #f8961e;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
        }

        body {
            background: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #334155;
            padding: 1.5rem;
        }

        .card {
            background: white;
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            cursor: pointer;
            border: none;
            outline: none;
        }

        .btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
        }

        .btn-blue {
            background: var(--primary);
            color: white;
        }

        .btn-blue:hover {
            background: var(--secondary);
            transform: translateY(-1px);
        }

        .btn-gray {
            background: #f1f5f9;
            color: #64748b;
        }

        .btn-gray:hover {
            background: #e2e8f0;
            transform: translateY(-1px);
        }

        .btn-green {
            background: #10b981;
            color: white;
        }

        .btn-green:hover {
            background: #059669;
            transform: translateY(-1px);
        }

        .form-input {
            padding: 0.6rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid #d1d5db;
            transition: all 0.2s;
            width: 100%;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.4rem 0.8rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid transparent;
            height: 32px;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .action-btn-add {
            background: var(--primary);
            color: white;
        }

        .action-btn-add:hover {
            background: var(--secondary);
            color: white;
        }

        .action-btn-edit {
            background: var(--primary-light);
            color: white;
            margin-right: 0.5rem;
        }

        .action-btn-view {
            background: var(--success);
            color: white;
            margin-right: 0.5rem;
        }

        .action-btn-view:hover {
            background: #18a05a;
            color: white;
        }
        .action-btn-edit:hover {
            background: var(--primary);
            color: white;
        }

        .action-btn-delete {
            background: #fef2f2;
            color: #ef4444;
            border: 1px solid #fecaca;
        }

        .action-btn-delete:hover {
            background: #ef4444;
            color: white;
        }

        .action-btn-generate {
            background: #10b981;
            color: white;
            margin-right: 0.5rem;
        }

        .action-btn-generate:hover {
            background: #059669;
            color: white;
        }

        .page-title {
            color: #1e293b;
            font-weight: 600;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .section-title {
            color: #334155;
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .layui-table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
        }

        .layui-table thead tr {
            background: linear-gradient(to right, #f8fafc, #f1f5f9) !important;
        }

        .layui-table th {
            font-weight: 600;
            color: #334155;
        }

        .layui-table td, .layui-table th {
            padding: 0.75rem 1rem;
        }

        .layui-table tr:hover td {
            background-color: #f8fafc !important;
        }

        .table-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 0;
            height: 100%;
        }

        .layui-laypage a, .layui-laypage span {
            border-radius: 0.375rem !important;
            border: 1px solid #e2e8f0 !important;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: var(--primary) !important;
            border-radius: 0.375rem !important;
        }

        .layui-table-header .layui-form-checkbox[lay-skin="primary"] {
            margin-top: 0;
        }

        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            align-items: end;
        }

        @media (min-width: 768px) {
            .search-form {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .search-form {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card {
            animation: fadeIn 0.5s ease-out;
        }

        .action-btn svg {
            margin-right: 4px;
            flex-shrink: 0;
        }

        .toolbar-container {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .total-price {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background: #f1f5f9;
            border-radius: 0.5rem;
            font-weight: 600;
            color: #334155;
            margin-left: auto;
        }

        .total-price span {
            color: var(--primary);
            margin-left: 0.5rem;
            font-size: 1.1rem;
        }
    </style>
</head>
<body class="p-6 bg-gray-50">

<!-- 页面容器，保持与原页面一致的宽度控制 -->
<div class="max-w-7xl mx-auto">
    <!-- 页面标题，复用原样式 -->
    <h1 class="page-title">订单明细管理</h1>

    <!-- 搜索栏，完全复用原页面卡片式设计 -->
    <div class="card">
        <h2 class="section-title">搜索筛选</h2>
        <form class="layui-form search-form" action="">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工厂名称</label>
                <input type="text" name="supplierName" placeholder="请输入工厂名称" class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工厂编号</label>
                <input type="text" name="supplierNo" placeholder="请输入工厂编号" class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工厂订单编号</label>
                <input type="text" name="contractNo" placeholder="请输入工厂订单编号" class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工厂订单名称</label>
                <input type="text" name="contractName" placeholder="请输入工厂订单名称" class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报价单编号</label>
                <input type="text" name="quotationNo" placeholder="请输入报价单编号" class="form-input">
            </div>
            <div class="flex space-x-2 items-end">
                <button type="submit" class="btn btn-blue flex items-center" lay-submit lay-filter="data-search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    搜索
                </button>
                <button type="reset" class="btn btn-gray flex items-center" lay-submit lay-filter="data-refresh-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    刷新
                </button>
            </div>
        </form>
    </div>

    <!-- 工具栏模板，复用原页面按钮样式与布局 -->
    <script type="text/html" id="toolbarDemo">
        <div class="toolbar-container">
            <button class="action-btn action-btn-add flex items-center" lay-event="add">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                添加订单
            </button>
            <button class="action-btn action-btn-generate flex items-center" lay-event="createSupplierContract">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                生成工厂合同
            </button>
            <div class="total-price" id="sumButton">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                工厂订单总金额：<span id="sumPrice">0</span>
            </div>
        </div>
    </script>

    <!-- Layui 表格，保持与原页面一致的样式配置 -->
    <div class="card">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<!-- 操作栏模板，复用原页面按钮样式与图标 -->
<script type="text/html" id="currentTableBar">
    <div class="table-actions">
        <button class="action-btn action-btn-view" lay-event="show">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            查看
        </button>
        <button class="action-btn action-btn-edit" lay-event="edit">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
            </svg>
            编辑
        </button>
        <button class="action-btn action-btn-delete" lay-event="delete">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
            删除
        </button>
    </div>
</script>

<script>
    var lay, form, table, util;

    layui.use(['form', 'table', 'util'], function () {
        lay = layui.jquery;
        form = layui.form;
        table = layui.table;
        util = layui.util;

        // 渲染表格，保持与原页面一致的配置项，仅修改业务相关参数
        table.render({
            elem: '#currentTableId',
            url: '/supplierContract/pages',
            toolbar: '#toolbarDemo',
            method: "post",
            request: {
                pageName: "pageNum",
                limitName: "pageSize"
            },
            contentType: "application/json; charset=utf-8",
            where: { param: {} },
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 65, title: 'ID', sort: true},
                {field: 'contractNo', width: 120, title: '工厂订单编号'},
                {field: 'contractName', width: 120, title: '工厂订单名称'},
                {field: 'supplierNo', width: 120, title: '工厂编号'},
                {field: 'supplierName', width: 120, title: '工厂名称'},
                {field: 'supplierContractNo', width: 120, title: '工厂合同编号'},
                {
                    field: 'orderDate',
                    width: 100,
                    title: '下单日期',
                    templet: "<div>{{layui.util.toDateString(d.orderDate, 'yyyy-MM-dd')}}</div>"
                },
                {field: 'supplierHandler', width: 120, title: '工厂经办人'},
                {field: 'handler', width: 120, title: '公司经办人'},
                {
                    field: 'contractStartTime',
                    width: 100,
                    title: '交货日期',
                    templet: "<div>{{layui.util.toDateString(d.contractStartTime, 'yyyy-MM-dd')}}</div>"
                },
                {field: 'boxNumber', width: 140, title: '总箱量'},
                {field: 'totalItemNumber', width: 140, title: '数量'},
                {field: 'totalPrice', width: 140, title: '订单总金额'},
                {field: 'address', width: 200, title: '地址'},
                {field: 'contacts', width: 140, title: '联系人'},
                {field: 'phone', width: 150, title: '联系电话'},
                {field: 'contractTerms', width: 200, title: '合同条款'},
                {field: 'remarks', width: 200, title: '备注要求明细'},
                {field: 'quotationNo', width: 120, title: '报价单编号'},
                {field: 'quotationName', width: 120, title: '报价单名称'},
                {
                    field: 'createTime',
                    width: 120,
                    title: '创建时间',
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"
                },
                {field: 'updateUser', width: 100, title: '修改人'},
                {
                    field: 'updateTime',
                    width: 120,
                    title: '修改时间',
                    templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"
                },
                {title: '操作', minWidth: 280, toolbar: '#currentTableBar', align: "center", fixed: 'right'}
            ]],
            done: function (res, curr, count) {
                // 权限控制逻辑保持与原页面一致
                if ($.common.userIsAdmin()) {
                    $("[data-field='updateUser']").css('display', 'none');
                    $("[data-field='updateTime']").css('display', 'none');
                }
                // 订单金额汇总逻辑保持与原页面一致
                if ($.common.userIsShowPower()) {
                    let sumPrice = 0;
                    let data = res.data;
                    if (data.length > 0) {
                        for (let i in data) {
                            if (data[i].totalPrice) {
                                sumPrice = sumPrice + data[i].totalPrice;
                            }
                        }
                    }
                    $("#sumPrice").html(sumPrice);
                } else {
                    $('#sumButton').css("display", "none");
                    $("[data-field='totalPrice']").css('display', 'none');
                }
            },
            limits: [5, 10, 15, 20, 25, 50, 100, 500],
            limit: 10,
            page: true,
            skin: 'line',
            even: true,
            text: {
                none: '暂无相关数据'
            }
        });

        // 搜索逻辑保持与原页面一致
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: { curr: 1 },
                where: { param: data.field }
            });
            return false;
        });

        // 刷新逻辑保持与原页面一致
        form.on('submit(data-refresh-btn)', function () {
            table.reload('currentTableId', {
                where: { param: {} }
            });
            return false;
        });

        /**
         * 工具栏事件监听，保持与原页面一致的交互逻辑
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {
                layer.open({
                    title: '添加订单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/static/page/supplierContract/add.html',
                });
                return false;
            } else if (obj.event === 'createSupplierContract') {
                let checkStatus = table.checkStatus('currentTableId');
                if (checkStatus.data.length != 1) {
                    layer.msg("请选择一条数据", {icon: 2});
                    return false;
                }
                let id = checkStatus.data[0].id;
                let supplierContractNo = checkStatus.data[0].supplierContractNo;
                if (!supplierContractNo || '' == supplierContractNo) {
                    layer.msg("请完善工厂订单信息", {icon: 2});
                    return false;
                }
                window.location.href = '/supplierContract/createSupplierContract/' + id;
                return false;
            }
        });

        // 表格复选框监听（复用原页面逻辑）
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj);
        });

        // 表格操作栏事件监听（保持交互逻辑一致，仅修改业务链接）
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'show') {
                layer.open({
                    title: '查看订单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/static/page/supplierContract/add.html?supplierContractId=' + data.id
                        + "&quotationId=" + data.quotationId + "&supplierId=" + data.supplierId + "&isShow=true",
                    data: data,
                    success: function (index, layero) {
                        var body = layer.getChildFrame('body', layero);
                        for (let key in data) {
                            if (['contractStartTime', 'customerEndTime', 'orderDate'].includes(key)) {
                                let a = util.toDateString(data[key], 'yyyy-MM-dd HH:mm:ss');
                                body.find("#" + key).val(a);
                            } else {
                                body.find("#" + key).val(data[key]);
                            }
                        }
                    }
                });
                return false;
            } else if (obj.event === 'edit') {
                layer.open({
                    title: '修改订单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/static/page/supplierContract/add.html?supplierContractId=' + data.id
                        + "&quotationId=" + data.quotationId + "&supplierId=" + data.supplierId,
                    data: data,
                    success: function (index, layero) {
                        var body = layer.getChildFrame('body', layero);
                        for (let key in data) {
                            if (['contractStartTime', 'customerEndTime', 'orderDate'].includes(key)) {
                                let a = util.toDateString(data[key], 'yyyy-MM-dd HH:mm:ss');
                                body.find("#" + key).val(a);
                            } else {
                                body.find("#" + key).val(data[key]);
                            }
                        }
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除订单 "' + data.contractName + '" 吗？', {
                    title: '删除确认',
                    icon: 3,
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);
                    let url = "/supplierContract/delete/" + obj.data.id;
                    let callback = {
                        onSuccess: function (result) {
                            if (result.code == 0) {
                                table.reload('currentTableId');
                                layer.msg("删除成功", {icon: 1});
                            } else {
                                layer.msg("删除失败：" + result.message, {icon: 2});
                                return false;
                            }
                        }
                    };
                    $.xAjax(url, 'POST', JSON.stringify(data.field), callback);
                });
            }
        });
    });
</script>

</body>
</html>